<template>
  <!--  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">-->
  <!--    <span style="line-height:60px;font-size:20px;">委托列表</span>-->
  <!-- :disabled="user.parentId==null" 如果当前登录人没有上级,禁用申请用车按钮 总裁用车不用申请 -->
  <el-button type="primary" style="float:left;margin-top:13px;background-color: #42b983;border-color: #42b983"
             @click="addInformDialogVisible=true">新增委托</el-button>
  <!--  </div>-->
  <!-- 新增委托弹窗 -->
  <el-dialog title="创建委托" v-model="addInformDialogVisible" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="委托人">
            <!-- 申请人是当前登录人,需要从localStorage中获取,只读 -->
            <el-input readonly :value="user.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="委托预计时间">
            <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="times"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="旅行出发地">
            <el-input placeholder="请输入" v-model="addInform.beginPlace"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="旅行目的地">
            <el-input placeholder="请输入" v-model="addInform.endPlace"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="心愿单">
            <el-input placeholder="请输入" type="textarea" resize="none" :rows="3" v-model="addInform.hope"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="委托导游的编号">
            <el-select
                v-model="addInform.guideId"
                clearable
                placeholder="位置"
                style="width: 240px"
            >
              <el-option
                  v-for="item in guide"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>

      <!--        <el-col :span="12">-->
      <!--          &lt;!&ndash; 审批人是固定的,上级 上上级,可以根据当前登录用户查出,有就显示,没有就消失 &ndash;&gt;-->
      <!--          <el-form-item label="导游">-->
      <!--            <el-row :gutter="10">-->
      <!--              <el-col :span="12" v-if="auditUserOpts.length>0">-->
      <!--                <el-tag type="primary">-->
      <!--                  <el-icon style="margin-right:5px;position:relative;top:2px;">-->
      <!--                    <User/>-->
      <!--                  </el-icon>-->
      <!--                  <span>{{ auditUserOpts[0].guide }}</span>-->
      <!--                </el-tag>-->
      <!--              </el-col>-->
      <!--              <el-col :span="12" v-if="auditUserOpts.length>1">-->
      <!--                <el-tag type="primary">-->
      <!--                  <el-icon style="margin-right:5px;position:relative;top:2px;">-->
      <!--                    <User/>-->
      <!--                  </el-icon>-->
      <!--                  <span>{{ auditUserOpts[1].username }}</span>-->
      <!--                </el-tag>-->
      <!--              </el-col>-->
      <!--            </el-row>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="addNewInform">确定</el-button>
    </template>
  </el-dialog>

  <!--  主页面 自动加载-->
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;margin-top: 50px;" >

    <el-row :gutter="30" style="margin-top:15px">
      <el-icon size="25px" style="margin-left: 15px;"><Bell /></el-icon>
      <el-col :span="6">
        <span style="margin-top:0;font-size:20px;margin-right: 20px;">我的委托</span>
      </el-col>
      <el-col :span="5">
        <el-form-item label="委托状态">
          <el-select placeholder="请选择状态" v-model="searchInform.status">
            <el-option label="异常" value="10"/>
            <el-option label="进行中" value="20"/>
            <el-option label="已完成" value="30"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="loadInform">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </div>

  <!--  委托查询表格-->
  <el-card style="margin:20px">
    <el-table :data="tableData">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="beginPlace" label="出发地"></el-table-column>
      <el-table-column align="center" prop="endPlace" label="目的地"></el-table-column>
      <el-table-column align="center" prop="hope" label="心愿单"></el-table-column>
      <el-table-column align="center" prop="guideName" label="导游"></el-table-column>
      <el-table-column align="center" prop="startTime" label="委托预计开始时间"></el-table-column>
      <el-table-column align="center" prop="endTime" label="委托结束时间"></el-table-column>
      <el-table-column align="center" prop="status" label="委托状态"
                       :formatter="appStatusFormatter"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button v-if="scope.row.status == 10 || scope.row.status == 20" type="primary" size="small" link @click="cancel(scope.row.id)">取消委托</el-button>
          <el-button v-if="scope.row.status == 30" type="primary" size="small" link @click="cancel(scope.row.id)">删除订单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--  <div style="margin: 0">-->
  <!--    <el-scrollbar height="400px">-->
  <!--        <el-row  v-for="item in 20" :key="item" class="item-container">-->
  <!--        <el-col :span="1">-->
  <!--          <el-avatar src="/lbxx/lbxx.jpg"/>-->
  <!--        </el-col>-->
  <!--        <el-col :span="17">-->
  <!--        <span class="scrollbar-demo-item">内容</span>-->
  <!--        </el-col>-->
  <!--      <el-col :span="2">-->
  <!--          <el-button  @click="toDetail" type="info" style="width: 90px;height: 50px;">查看</el-button>-->
  <!--      </el-col>-->
  <!--      <el-col :span="2">-->
  <!--          <el-button @click="marked" type="warning" style="width: 90px;height: 50px;">已读</el-button>-->
  <!--      </el-col>-->
  <!--      <el-col :span="2">-->
  <!--          <el-button @click="remove" type="danger" style="width: 90px;height: 50px;">删除</el-button>-->
  <!--      </el-col>-->
  <!--        </el-row>-->
  <!--      <p style="font-size: large;margin-left: 65px; ">哎呀，已经到底部啦~</p>-->
  <!--    </el-scrollbar>-->
  <!--  </div>-->




</template>
<script setup>
//刷新
import {onMounted,ref} from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";
import qs from "qs";
import axios from "axios";

onMounted(()=>{
  loadInform();
  optionsArrMethod();
})


//定义申请弹窗是否出现
const addInformDialogVisible = ref(false);
//获取游客姓名
const user = ref(getUser());
//准备新增委托弹窗数据
const addInform = ref({
  userId :'',
  startTime:'',
  endTime:'',
  beginPlace:'',
  endPlace:'',
  hope:'',
  guideId:''
})

const times = ref([])

const appStatusFormatter = (row,colum,cellValue,index) => {
  if(cellValue == 10 || cellValue == null){
    cellValue = '异常';
  }else if(cellValue == 20){
    cellValue = '进行中';
  }else if(cellValue == 30){
    cellValue = '已完成';
  }return cellValue;
}
//定义保存委托方法
const addNewInform = () => {
  //加入其他信息
  addInform.value.userId = user.value.id;
  addInform.value.startTime = times.value[0];
  addInform.value.endTime = times.value[1];

  let data = qs.stringify(addInform.value)
  console.log(data)
  axios.post(BASE_URL+'/v1/inform/add',data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success("委托成功！");
      addInformDialogVisible.value = false;
      addInform.value = {}
      loadInform();
    }else {
      ElMessage.error("保存失败,请重试")
    }
  })
}


//定义数组用来存列表数据
const tableData = ref([]);
//定义加载委托的条件
const searchInform = ref({
  userId:'',
  status:''
});
//定义加载委托的方法
// 查询功能

const loadInform = ()=> {
  searchInform.value.userId = user.value.id;
  let data = qs.stringify(searchInform.value)
  axios.get(BASE_URL+'/v1/inform/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      tableData.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

//申请表格删除
const handleClose = () => {
  if(comfirm("确认取消编辑委托吗？")){
    addInformDialogVisible.value = false;
    addInform.value = {};
    times.value = {}
  }
}

//重置搜索
const reset = ()=>{
  ElMessage.success("重置成功!")
  searchInform.value={};
  loadInform();
}
//取消功能
const cancel = (id) => {
  if(confirm("确认撤销吗?")){
    axios.post(BASE_URL+'/v1/inform/delete/'+id).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success('已撤销!');
        loadInform();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
}

const value = ref('');
const guide = ref([]);
const guideArr = ref([]);
const optionsArrMethod = () => {
  axios.get( BASE_URL+'/yyt/user/select').then((response)=>{
    if (response.data.code==2000){
      guideArr.value=response.data.data;
      console.log(guideArr.value);
      guideArr.value = guideArr.value.filter(item => item.isGuide === '1');
      console.log(guideArr.value);
      guide.value = [];
      for (let i = 0; i < guideArr.value.length; i++) {
        const item = guideArr.value[i];
        guide.value.push({
          value: item.id, // 假设每个场景对象都有一个id属性
          label: item.username, // 假设每个场景对象都有一个name属性
        });
      }
    }else {
      ElMessage.error('失败');
    }
  })
}
</script>

<style scoped>
</style>